// pages/canvastest/canvastest.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ratingstar_selected: {},
    ratingstar_unselect: {},
    canvasWidth: 0,
    starSize: 0,
    ctx: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    var that = this
    wx.createSelectorQuery()
      .select("#myCanvas")
      .fields({ 'node': true, 'size': true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext("2d")

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        console.log("res[0].width:", res[0].width, ",res[0].height:", res[0].height)
        ctx.scale(dpr, dpr)


        ctx.fillRect(0, 0, 100, 100)

        that.setData({
          canvasWidth: res[0].width,
          starSize: res[0].height,
          ctx: ctx
        })

        console.log("width:", canvas.width, ",heght:", canvas.height, ",starSize:", that.data.starSize)


        // ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)

        // ctx.draw()





        // 图片对象
        const unselectimage = canvas.createImage()
        // 图片加载完成回调
        unselectimage.onload = () => {
          console.log(unselectimage)
          // 将图片绘制到 canvas 上
          ctx.drawImage(unselectimage, 0, 0, unselectimage.width, unselectimage.height, 0, 0, that.data.starSize, that.data.starSize)
          ctx.drawImage(unselectimage, 0, 0, unselectimage.width, unselectimage.height, that.data.starSize, 0, that.data.starSize, that.data.starSize)
          ctx.drawImage(unselectimage, 0, 0, unselectimage.width, unselectimage.height, that.data.starSize * 2, 0, that.data.starSize, that.data.starSize)
          ctx.drawImage(unselectimage, 0, 0, unselectimage.width, unselectimage.height, that.data.starSize * 3, 0, that.data.starSize, that.data.starSize)
          ctx.drawImage(unselectimage, 0, 0, unselectimage.width, unselectimage.height, that.data.starSize * 4, 0, that.data.starSize, that.data.starSize)


          that.setData({
            ratingstar_unselect: unselectimage
          })
          ctx.draw()
        }
        // 设置图片src
        unselectimage.src = 'http://192.168.1.104:8090/files/ic_rating_star_unselect.png'


        // 图片对象
        const selectimage = canvas.createImage()
        // 图片加载完成回调
        selectimage.onload = () => {
          // 将图片绘制到 canvas 上
          ctx.drawImage(selectimage, 0, 0, selectimage.width / 2, selectimage.height, 0, 0, that.data.starSize / 2, that.data.starSize)

          // ctx.drawImage(selectimage, 0, 0, selectimage.width, selectimage.height, 0, 0,30, 30)
          // ctx.drawImage(selectimage, 0, 0, selectimage.width, selectimage.height, 40, 0,30, 30)
          // ctx.drawImage(selectimage, 0, 0, selectimage.width, selectimage.height, 80, 0,30, 30)
          // ctx.drawImage(selectimage, 0, 0, selectimage.width, selectimage.height, 120, 0,30, 30)
          // ctx.drawImage(selectimage, 0, 0, selectimage.width, selectimage.height, 160, 0,30, 30)


          that.setData({
            ratingstar_selected: selectimage
          })
          ctx.draw()
        }
        // 设置图片src
        selectimage.src = 'http://192.168.1.104:8090/files/ic_rating_star.png'

      })
  },

  touchstart(e) {
    this.drawSelcetStars(e)
  },

  touchmove(e) {
    this.drawSelcetStars(e)
  },

  bindtouchend(e) {
    console.log("bindtouchend...")
  },

  drawSelcetStars(e) {
    this.drawUnselectStars()
    let progress = e.changedTouches[0].pageX / this.data.starSize
    let fullStar = parseInt(progress)
    console.log(fullStar)
    for (var i = 0; i < fullStar; ++i) {
      this.data.ctx.drawImage(this.data.ratingstar_selected, 0, 0, this.data.ratingstar_selected.width, this.data.ratingstar_selected.height, i * this.data.starSize, 0, this.data.starSize, this.data.starSize)
    }

    let lastProgress = progress - fullStar
    this.data.ctx.drawImage(this.data.ratingstar_selected, 0, 0, this.data.ratingstar_selected.width * lastProgress, this.data.ratingstar_selected.height, fullStar * this.data.starSize, 0, this.data.starSize * lastProgress, this.data.starSize)


    console.log(progress)//默认宽度200，后期改成canvas宽度
  },

  drawUnselectStars() {
    this.data.ctx.clearRect(0, 0, this.data.canvasWidth, this.data.starSize)
    this.data.ctx.drawImage(this.data.ratingstar_unselect, 0, 0, this.data.ratingstar_unselect.width, this.data.ratingstar_unselect.height, 0, 0, this.data.starSize, this.data.starSize)
    this.data.ctx.drawImage(this.data.ratingstar_unselect, 0, 0, this.data.ratingstar_unselect.width, this.data.ratingstar_unselect.height, this.data.starSize, 0, this.data.starSize, this.data.starSize)
    this.data.ctx.drawImage(this.data.ratingstar_unselect, 0, 0, this.data.ratingstar_unselect.width, this.data.ratingstar_unselect.height, this.data.starSize * 2, 0, this.data.starSize, this.data.starSize)
    this.data.ctx.drawImage(this.data.ratingstar_unselect, 0, 0, this.data.ratingstar_unselect.width, this.data.ratingstar_unselect.height, this.data.starSize * 3, 0, this.data.starSize, this.data.starSize)
    this.data.ctx.drawImage(this.data.ratingstar_unselect, 0, 0, this.data.ratingstar_unselect.width, this.data.ratingstar_unselect.height, this.data.starSize * 4, 0, this.data.starSize, this.data.starSize)

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})